<template>
	<view>
		<view class="head">
			<image src="../../static/ingxBG.png" mode=""></image>
			<view class="item">
				<view :style="{marginTop:top+4+'px'}">玄袚斋中医诊所医生端</view>
				<view class="tab">
					<u-tabs lineColor="#882027" :activeStyle="{color:'#882027'}" :list="list1" :scrollable="false" @click="click"></u-tabs>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll">
			<view class="box flex" v-for="item in list" @click="navto(item.order_id)">
				<view class="flex">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view>
						<text class="size-28">{{item.patient_name}}</text>
						<text class="size-24 ml-10">{{item.patient_gender == 1 ? '男' : item.patient_gender == 2 ? '女' : '未知'}} {{item.patient_age}}岁</text>
					</view>
				</view>
				<image src="/static/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				top: 0,
				list1: [{
					name: '待问诊',
					id:'1'
				}, {
					name: '进行中',
					id:'2'
				}, {
					name: '已完成',
					id:'3'
				}],
				status:'1',
				more:true,
				page:1,
				list:[]
			}
		},
		computed: {
			// ...mapState(['userInfo']),
		},
		onLoad() {
			this.top = uni.getMenuButtonBoundingClientRect().top
			this.init()
		},
		methods: {
			init(){
				this.$api.orderList({
					page_no:this.page,
					page_size:20,
					order_type:0,
					order_status:this.status
				}).then(res=>{
					if(res.data.length > 20){
						this.more = false
					}
					this.list = this.list.concat(res.data)
				})
			},
			click(e){
				console.log(e)
				this.status = e.id
				this.page = 1
				this.more = true
				this.list = []
				this.init()
			},
			navto(id){
				uni.navigateTo({
					url:'./patientInfo/patientInfo?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.box{
		width: 690rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding: 30rpx;
		margin: 0rpx auto 30rpx;
		image{
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
	.scroll{
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		height: calc(100vh - 340rpx);
	}
	.head {
		width: 100%;
		height: 450rpx;
		position: fixed;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}

		.item {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.tab {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin: 45rpx auto 0;
		padding: 10rpx 0rpx 0;

	}
</style>